<template>
  <div class="hello" :class="tablePaddingClass">
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="120">
        <template #header v-if="multiHeader">
          <div class="group-bias-divide">
            <div
              class="top"
              v-for="(item, index) in multiHeaderContent"
              :key="index"
            >
              {{ item.name }}
            </div>
          </div>
        </template>
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <template v-for="(item, index) in tableColumn">
        <el-table-column :key="index" :prop="item.key" :label="item.name">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row[item.key]"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    // 是否多属性表头
    multiHeader: {
      type: Boolean,
      default: false,
    },
    // 多属性表头内容
    multiHeaderContent: {
      type: Array,
      default: () => [],
    },
    // 动态添加的列数
    trendsNum: {
      type: Number,
      default: 0,
    },
    // 固定表头列
    fixedColumn: {
      type: Array,
      default: () => [],
    },
    // 表格数据
    tableList: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    // 动态计算表头样式
    tablePaddingClass() {
      return this.multiHeader ? "el-table-padding-zero" : "";
    },
  },
  watch: {
    trendsNum: {
      handler(newVal) {
        // 修改tableColumn的列
        this.changeTableColumn(newVal);
        this.list = this.tableList;
      },
      immediate: true,
    },
  },
  data() {
    return {
      // 表格数据
      list: this.tableList,
      // 动态添加表头数据
      tableColumn: [],
    };
  },
  methods: {
    changeTableColumn(num) {
      let that = this;
      let list = [];
      for (let i = 1; i <= num; i++) {
        list.push({
          key: "key" + i,
          name: "姓名" + i,
        });
      }
      that.tableColumn = list;
    },
  },
};
</script>

<style scoped lang="scss">
.el-table-padding-zero :deep(.el-table thead .el-table__cell) {
  padding: 0;
}
:deep(.el-table thead .el-table__cell) {
  color: red;
}
:deep(.el-table .cell) {
  padding: 0 !important;
  text-align: center;
}
:deep(.group-bias-divide) {
  .top {
    text-align: right;
    padding-right: 2em;
    box-sizing: border-box;

    &:nth-child(2) {
      text-align: left;
      padding-left: 2em;
      box-sizing: border-box;

      &::before {
        content: "";
        position: absolute;
        width: 1px !important;
        height: 187px !important;
        top: auto !important;
        left: auto !important;
        bottom: 0 !important;
        right: 0 !important;
        background-color: #d6d6d6;
        display: block;
        transform: rotate(291deg);
        transform-origin: bottom;
      }
    }
  }
}
</style>
